<!-- <template>
  <el-select v-model="value" multiple collapse-tags placeholder="请选择">
    <el-option-group
      v-for="group in options"
      :key="group.label"
      :label="group.label"
    >
      <el-option
        v-for="item in group.options"
        :key="item.label + group.label"
        :label="item.label"
        :value="item.label + '*' + group.label"
      >
      </el-option>
    </el-option-group>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          label: "热门城市",
          options: [
            {
              label: "上海",
            },
            {
              label: "北京",
            },
          ],
        },
        {
          label: "城市名",
          options: [
            {
              label: "成都",
            },
            {
              label: "深圳",
            },
            {
              label: "广州",
            },
            {
              label: "大连",
            },
            {
              label: "北京",
            },
          ],
        },
      ],
      value: [],
    };
  },
  watch: {
    value(n) {
      this.temp = [];
      n.forEach((item) => {
        if (item.includes("*")) {
          this.temp.push(item.split("*")[0]);
        }
      });
    },
  },
};
</script> -->
<template>
  <div>
    <el-select
      v-model="value"
      placeholder="请选择"
      @change="changeSelect"
      style="width: 250px"
      clearable
      multiple
      collapse-tags
      size="small"
      popper-class="productGroupSelector"
      class="productGroup-select"
    >
      <div
        v-for="group in options"
        :key="group.label"
        class="productGroupSelector-group"
      >
        <div
          style="
            display: flex;
            align-items: center;
            padding-top: 8px;
            padding-left: 5px;
          "
        >
          <el-checkbox
            v-model="group.checked"
            @change="selectAll($event, group.id)"
            :indeterminate="group.isIndeterminate"
          ></el-checkbox>
          <div class="productGroupSelector-group-title">{{ group.label }}</div>
        </div>
        <div style="display: flex; align-items: start">
          <div class="productGroupSelector-option-root">
            <el-option
              class="productGroupSelector-option"
              v-for="item in group.options"
              :key="item.value"
              :label="item.label"
              :value="group.label + '-' + item.value"
            >
              <div class="productGroupSelector-option-content">
                {{ item.label }}
              </div>
            </el-option>
          </div>
        </div>
      </div>
    </el-select>
  </div>
</template>
<script>
export default {
  name: "SelectorComponent4",
  data() {
    return {
      options: [
        {
          id: 1,
          label: "热门城市",
          checked: false,
          isIndeterminate: false,
          options: [
            {
              value: "Shanghai",
              label: "上海",
            },
            {
              value: "Beijing",
              label: "北京",
            },
          ],
        },
        {
          id: 2,
          label: "城市名",
          checked: false,
          isIndeterminate: false,
          options: [
            {
              value: "Chengdu",
              label: "成都",
            },
            {
              value: "Shenzhen",
              label: "深圳",
            },
            {
              value: "Guangzhou",
              label: "广州",
            },
            {
              value: "Dalian",
              label: "大连",
            },
            {
              value: "Huizhou",
              label: "惠州",
            },
          ],
        },
        {
          id: 3,
          label: "城市名2",
          checked: false,
          isIndeterminate: false,
          options: [
            {
              value: "Chengdu2",
              label: "成都22222",
            },
            {
              value: "Shenzhen2",
              label: "深圳22222",
            },
            {
              value: "Guangzhou2",
              label: "广州2222",
            },
            {
              value: "Dalian2",
              label: "大连222222222222",
            },
            {
              value: "Huizhou2",
              label: "惠州2",
            },
          ],
        },
        {
          id: 4,
          label: "城市名3",
          checked: false,
          isIndeterminate: false,
          options: [
            {
              value: "Chengdu3",
              label: "成都333",
            },
            {
              value: "Shenzhen3",
              label: "深圳3",
            },
            {
              value: "Guangzhou3",
              label: "广州33",
            },
            {
              value: "Dalian3",
              label: "大连33333111111111111111333",
            },
            {
              value: "Huizhou3",
              label: "惠州3",
            },
          ],
        },
      ],
      value: "",
    };
  },
  methods: {
    selectAll(val, id) {
      const selectOption = this.options.find((f) => f.id === id);
      const arr = selectOption.options.map(
        (m) => selectOption.label + "-" + m.value
      );
      if (val) {
        arr.forEach((item) => {
          if (!this.value.includes(item)) {
            this.value.push(item);
          }
        });
      } else {
        this.value.forEach((item, index) => {
          if (arr.includes(item)) {
            this.value.splice(index, 1, "");
          }
        });
      }
      this.value = this.value.filter((f) => f !== "");
      if (selectOption.checked) {
        selectOption.isIndeterminate = false;
      }
    },
    changeSelect(val) {
      this.options.forEach((item) => {
        const arr = item.options.map((m) => item.label + "-" + m.value);
        item.isIndeterminate = arr.some((v) => {
          return val.some((s) => s === v);
        });
        item.checked = arr.every((v) => {
          return val.some((s) => s === v);
        });
        if (item.checked) {
          item.isIndeterminate = false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
@selectGroupWidth: 450px;
.productGroupSelector-group {
  padding-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: @selectGroupWidth;
  padding-bottom: 10px;
  &-title {
    padding-left: 5px;
    font-weight: bold;
  }
  &:after {
    display: none;
  }
}

.productGroupSelector-option-root {
  width: @selectGroupWidth;
}

.el-select-dropdown.is-multiple .el-select-dropdown__item {
  padding-right: 0;
}

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected:after {
  left: 5px;
}

.productGroup-select /deep/ .el-select__tags-text:first-child {
  max-width: 120px;
}

.productGroupSelector-option {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  width: (@selectGroupWidth / 3);
  &-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.productGroup-select /deep/ .el-select__tags-text:first-child {
  max-width: 120px;
}
</style>

<style lang="less">
@selectWidth: 450px;
.productGroupSelector {
  .el-scrollbar__view.el-select-dropdown__list {
    width: @selectWidth;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 0;
    @media screen and (max-width: @selectWidth) {
      width: (@selectWidth / 2);
    }
  }
}
.productGroupSelector {
  .el-select-dropdown__wrap.el-scrollbar__wrap {
    max-height: 350px;
  }
}
</style>
